<template>
  <div class="swiper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item in swiperList" :key="item.id">
        <img :src="item.imgUrl" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
  export default {
    props:['swiperList'],
    data(){
      return{
        swiperOption:{
          pagination: {
            el: '.swiper-pagination'
          },
          loop:true,
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          }
        },
        /*"swiperList":[
          {
            "id":"01",
            "imgUrl":"http://img1.qunarzz.com/piao/fusion/1609/47/0cfdc871ac183702.jpg_750x200_f6896acd.jpg"
          },{
            "id":"02",
            "imgUrl":"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/534106663f424042868365167e4a66ff.jpg_750x200_3ec12f21.jpg"
          },{
            "id":"03",
            "imgUrl":"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/81743f7e8589990dd413cccadf315f8b.jpg_750x200_6f3f5164.jpg"
          },
        ]*/

      }
    }
  }
</script>
<style scoped>
  .swiper{
    width: 100%;
    /* 防止掉块处理*/
    height: 0;
    padding-bottom: 26.67%;  /*100px/375px*/
    background-color: #ddd;
  }
  .swiper img{
    width: 100%;
    height: 100%;
  }
  .swiper >>> .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
  }
</style>
